<template>
    <div id="sucbox">
        <div id="topgrword">
            <img id="sucimg" src="http://y9gy2w.natappfree.cc/CreateQR/SimpleQR" alt="">
            <span id="grword">二维码已生成</span>   
        </div>
             <div id="namebox"><span id="midword">{{this.$route.query.id}}</span></div>
            <div id="rebut" @click="backmain"><span id="midwor">再建一个</span></div>
    </div>
</template>

<script>
export default {
    name:'Sucbox',
    data(){
    return{
        id:'',
    }
},
// mounted:function(){
//     // // localStorage.setItem("vuex",this.$store.state.history)
//     // console.log(this.$store.state.history[this.$store.state.history.length-1]);
//     //  window.localStorage.setItem("vuex",eval("(" + localStorage.getItem("vuex") + ")").history.push(this.$store.state.history[this.$store.state.history.length-1]))
//     console.log( localStorage.getItem("vuex"))
// },
methods:{
    backmain(){
        if(this.$route.query.src==0)
        this.$router.push({path:'/'});
        else{
        this.$router.push({path:'/Httpboxv'});
        }
    }
}
}
</script>

<style>
    #sucbox{
    position:absolute;
    top:140px;
    left: 290px;
    width: 780px;
    height: 290px;
    background-color: #FFFFFF;
}
#topgrword{
 position: absolute;
    top:18%;
    left:52%;
    transform: translate(-50%,-50%);
}
#grword{
    position: relative;
    top:-8px;
    font-size: 17px;
    font-weight: 350;
    color: #4BC370;
}
#sucimg{
    margin-right: 10px;
    transform:scale(0.7);
}
#namebox{
     position: absolute;
    top:45%;
    left:51%;
    transform: translate(-50%,-50%);
    width: 640px;
    height: 50px;
    overflow-y:scroll;
    overflow-x:hidden;
    background-color: #F1F4F8;
}
#midword{
    position: absolute;
    top:48%;
    left:52%;
    transform: translate(-50%,-50%);
}
#rebut{
    position: absolute;
    top:82%;
    left:54%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 40px;
    background-color: #FFFFFF;
    color: #3785ED;
    border: 2px solid #3785ED;
    border-radius:3px ;
    display: flex;
    justify-content: center; 
    align-items: center;  
    cursor: default;
}
#rebut:hover{
    opacity: 0.8;
     
}
 
</style>